<template>
	<view class="goods-list">
		<view class="goods-header">
			<view class="goods-search">
				<input class="goods-search__input" confirm-type="search" v-model="keyWords" type="text" placeholder="输入关键字搜索" />
				<text class="iconfontPT iconsousuo goods-search__icon"></text>
			</view>
		</view>
		<view class="goods-body"> 
			<view class="goods-navbar">
				<view class="goods-navbar__item u-line-1" :class="{'goods-navbar__item--active':index === activeIndex && !keyWords}" v-for="(item,index) in list" :key="index" @tap="handleToggleNav(index)">
					{{item.title}}
				</view>
			</view>
			<scroll-view class="goods-scroll" :scroll-into-view="`class-${scrollIndex}`" scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true" @scroll="handleAutoScroll" @touchstart="handleTouchScroll">
				
				<view class="goods-class" v-for="(item,index) in searchList" :key="item.class" :id="`class-${index}`">
					<view class="goods-class-title u-line-1">{{item.title}}</view>
					<view class="goods-class-list" v-for="(item,index) in item.child" :key="item.id">
						<view class="goods-class-item" @tap="handleJumpDetail(item.id)">
							<view class="goods-class-item__media">
								<image class="goods-class-item__image" :src="host + item.img + '-t.m60xx'" mode="aspectFill"></image>
							</view>
							<view class="goods-class-item__info">
								<view class="goods-class-item__inner">
									<text class="goods-class-item__title">{{item.title}}</text>
									<view class="goods-class-item__number">
										<view class="goods-class-item__price"><text class="goods-class-item__symbol">￥</text>{{item.price}}</view>
										<view class="goods-class-item__price">￥{{item.plat_price}}</view>
									</view>
								</view>
								<view class="goods-class-item__inner">
									<button class="goods-class-item__button" type="warn" @tap="handleJumpDetail(item.id)">抢购</button>
									<view class="goods-class-item__desc">已售 {{item.sale}} 单</view>
								</view>
							</view>
						</view>
					</view>
				</view>
<!-- 				<view class="test-item" v-for="n in 10" :key="n" :id="'id-'+n">
					{{n}}
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {goodsList, addToCart} from "../../apis/shop/api.js"
	import isEmpty from '@/utils/is-empty.js'
	export default {
		data() {
			return {
				list:[],
				keyWords: '',
				store_id: '',
				phone:'',
				activeIndex: 0, // 侧边栏高亮
				scrollIndex: 0, // 滚动分类 ID
				classRectList:[], // 分类节点信息
				scrollingLock: false // 滚动锁定
			}
		},
		computed: {
			host() {
				return this.$baseHost.qiniuHost
			},
			searchList(){
				return this.keyWords ? this.list.reduce((acc,cur)=>{
					const child = cur.child.filter(item=>item.title.includes(this.keyWords))
					return isEmpty(child) ? acc : [...acc,{...cur,child}]
				},[]) : this.list
			}
		},
		onLoad(option) {
			this.store_id = option.store_id;
			this.phone = option.phone;
			this.getGoodsListData()
		},
		methods: {
			async getGoodsListData(){
				try{
					const {code,info,data} = await goodsList({store_id: this.store_id})
					if(code === 200){
						this.list = data
					}else{
						uni.showModal({ title:'提示',content:info,showCancel:false})
					}
				}catch(e){
					uni.showModal({ title:'出错啦！',content:e.message,showCancel:false})
				}
			},
			/**
			 * 侧边栏点击
			 */
			handleToggleNav(index){
				this.keyWords = ''
				this.scrollingLock = true
				this.activeIndex = this.scrollIndex = index
			},
			/**
			 * 手动滚动
			 */
			handleTouchScroll(){
				this.scrollIndex = null // 重置滚动分类 ID
				this.scrollingLock = false // 手动触发滚动，解除联动锁
			},
			/**
			 * 滚动事件
			 */
			handleAutoScroll(e){
				if(!this.scrollingLock){
					this.activeIndex = this.classRectList.findIndex(item=>{
						return e.detail.scrollTop < (item.bottom - this.headerRect.bottom - 10)
					})
				}
			},
			/**
			 * 跳转到详情
			 */
			handleJumpDetail(id){
				uni.navigateTo({
					url:`/pages/shop/goodsinfo?store_id=${this.store_id}&id=${id}&phone=${this.phone}`
				})
			},
			/**
			 * 获取搜索框高度
			 */
			async getHeaderRect(){
				this.headerRect = await new Promise(resolve=>{
					uni.createSelectorQuery().in(this).select('.goods-header').boundingClientRect(resolve).exec()
				})
			},
			/**
			 * 获取分类高度列表
			 */
			async getClassRectList(){
				this.classRectList = await new Promise(resolve=>{
					uni.createSelectorQuery().in(this).selectAll('.goods-class').boundingClientRect(resolve).exec()
				})
			}
		},
		watch:{
			searchList(value){
				this.$nextTick(()=>{
					this.getHeaderRect()
					this.getClassRectList()
					
					// TODO: 滚动优化
					// const observer = uni.createIntersectionObserver(this,{observeAll:true})
					// observer.relativeTo('.goods-scroll').observe('.test-item',res=>{
					// 	if(res.intersectionRatio === 0){
					// 		console.log(res)
					// 	}
						
					// })
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-list{
		display: flex;
		height: 100vh;
		flex-direction: column;
	}
	.goods-header{
		padding: 30rpx;
	}
	.goods-body{
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	.goods-search{
		position: relative;
		background-color: #F5F5F5;
		border-radius: 32rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		&__input{
			
		}
		&__icon{
			position: absolute;
			right: 30rpx
		}
	}
	.goods-navbar{
		height: 100%;
		overflow-y: auto;
		background-color: #F5F5F5;
		&__item{
			width: 150rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 500;
			transition: .3s;
			&::before{
				transition: .3s;
				content: '';
				width: 6rpx;
				height: 0;
				background-color: #E41805;
				position: absolute;
				left: 0;
			}
			&--active{
				color: #E41805;
				background-color: #FFFFFF;
				position: relative;
				&::before{
					height: 1.5em;
				}
			}
		}
	}
	.goods-scroll{
		height: 100%;
		flex: 1;
	}
	.goods-class:last-of-type{
		margin-bottom: 60vh;
	}
	.goods-class-title{
		font-size: 30rpx;
		font-weight: bold;
		padding:30rpx 30rpx 0;
	}
	.goods-class-item{
		display: flex;
		margin: 0 30rpx;
		padding: 30rpx 0;
		box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC;
		&__image{
			width: 132rpx;
			height: 132rpx;
			vertical-align: middle;
		}
		&__info{
			flex: 1;
			margin-left: 30rpx;
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
		}
		&__inner{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		&__title{
			font-size: 30rpx;
			font-weight: 500;
		}
		&__button{
			width: 100rpx;
			height: 50rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			padding: 0;
			line-height: 50rpx;
		}
		&__number{
			display: flex;
			align-items: flex-end;
			line-height: 1em;
		}
		&__price:first-child{
			font-size: 30rpx;
			color: #E41805;
			font-weight: bold;
		}
		&__price:last-child{
			font-size: 18rpx;
			color: #999999;
			text-decoration:line-through;
			margin-left: 10rpx;
		}
		&__symbol{
			font-size: 18rpx;
		}
		&__desc{
			font-size: 18rpx;
			color: #999999;
		}
	}
	
	.test-item{
		width: 100%;
		height: 20vh;
		font-size: 50rpx;
		color: #FFFFFF;
		&:nth-child(even){
			background-color: blue;
		}
		&:nth-child(odd){
			background-color: red;
		}
	}

	
</style>
